<template>
  <div class="user">
    <img src="/static/images/img/loginBack.png" />

    <div class="login" v-if="status">
      <van-cell-group :border="false">
        <van-field
          v-model="loginParams.phone"
          type="digit"
          :maxlength="11"
          :clearable="true"
          placeholder="输入手机号"
        >
          <template #left-icon>
            <van-icon name="phone-o" size="23" class="set_icon" />
          </template>
        </van-field>

        <van-field
          v-model="loginParams.pwd"
          type="password"
          :clearable="true"
          placeholder="输入密码"
        >
          <template #left-icon>
            <van-icon name="shield-o" size="23" class="set_icon" />
          </template>
        </van-field>
      </van-cell-group>
      <div class="login_but">
        <van-button type="primary" round @click="UserLogin()">登 录</van-button>
        <div class="reg_tx" @click="status = false">注册账号</div>
      </div>
    </div>

    <div class="reg login" v-else>
      <van-cell-group :border="false">
        <van-field
          v-model="addParams.phone"
          placeholder="输入手机号"
          :maxlength="11"
          :clearable="true"
        >
          <template #left-icon>
            <van-icon name="phone-o" size="23" class="set_icon" />
          </template>
        </van-field>

        <van-field
          v-model="addParams.pwd"
          type="password"
          placeholder="输入密码"
          :clearable="true"
        >
          <template #left-icon>
            <van-icon name="shield-o" size="23" class="set_icon" />
          </template>
        </van-field>

        <van-field
          v-model="addParams.againPwd"
          type="password"
          placeholder="再次密码"
          :clearable="true"
        >
          <template #left-icon>
            <van-icon name="shield-o" size="23" class="set_icon" />
          </template>
        </van-field>
      </van-cell-group>
      <div class="login_but">
        <van-button type="primary" round @click="UserAdd()">注 册</van-button>
        <div class="reg_tx" @click="status = true">登录账号</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: true, //trun 登录 false 注册
      loginParams: {
        phone: "",
        pwd: "",
      },
      addParams: {
        phone: "",
        pwd: "",
        againPwd: "",
      },
    };
  },
  methods: {
    //登录
    async UserLogin() {
      if (this.verify(this.loginParams.phone, this.loginParams.pwd)) {
        let userInfo = await this.$http.user.login(this.loginParams);
        this.$utils.setItem("token", userInfo);
        this.$toast({
          message: "恭喜登录成功",
          onClose: () => {
            if (this.$route.query.from) {
              this.$router.push(this.$route.query.from);
            } else {
              this.$router.push("/");
            }
          },
        });
      }
    },
    //注册
    async UserAdd() {
      if (this.verify(this.addParams.phone,this.addParams.pwd,this.addParams.againPwd)){
        delete this.addParams.againPwd;
        let res = await this.$http.user.add(this.addParams);
        this.$toast({
          message: "恭喜注册成功",
          onClose: () => {
            this.status = true;
          },
        });
      }
    },

    verify(phone, pwd, againPwd = null) {
      if (!this.$utils.isPhone(phone)) {
        this.$toast("手机号不正确");
        return;
      }

      if (!this.$utils.checkPwd(pwd)) {
        this.$toast("密码不符合要求");
        return;
      }
      if (againPwd != null) {
        if (pwd != againPwd) {
          this.$toast("确认密码不符合要求");
          return;
        }
      }

      return true;
    },
  },
};
</script>

<style scoped lang="less">
@import "../assets/less/page/User.less";
</style>


<!-- <template>
    <div class="user">

    </div>
</template>

<script>
export default{
    data(){
        return{

        }
    }
}
</script>

<style scoped>

</style> -->